<template>
  <GlobalContainer showTabBar className="!bg-[#F3F3F3]" :backgroundImage="`${OSS_URL}/images/notify/notify_bg.png`">
    <GlobalHeader :fixed="true" :backgroundImage="`${OSS_URL}/images/notify/notify_bg.png`" />

    <div class="mt-150 pb-safe flex-1 px-24">
      <div class="list-c mt-30 py-8 pl-40 pr-32">
        <template v-if="noticeList.length">
          <div class="item-c flex items-center py-32" v-for="item in noticeList" :key="item.id" @tap="toPageHandle(item.id)">
            <image class="size-100 rounded-8 mr-20 shrink-0 bg-[#fefefe]" :src="item.images || `${OSS_URL}/images/default.png`" />
            <div class="right flex-1 overflow-hidden">
              <div class="text-32 leading-48 truncate text-[#303030]">{{ item.title }}</div>
              <div class="text-26 leading-40 mt-10 font-normal text-[#909090]">{{ item.createTime }}</div>
            </div>
          </div>
        </template>
        <template v-else>
          <div class="h-180 text-30 leading-180 text-center text-[#909090]">暂无公告</div>
        </template>
      </div>
    </div>
  </GlobalContainer>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { getNoticeList } from '@/common/api/common'
import { useAccountStore } from '@/store'

const OSS_URL = import.meta.env.VITE_OSS_URL
const accountStore = useAccountStore()
const token = computed(() => accountStore.token)

const toPageHandle = id => {
  uni.navigateTo({
    url: `/subPages/notifyContent/index?id=${id}`
  })
}
const noticeList = computed(() => accountStore.notificationList)
onShow(() => {
  if (accountStore.currentRoom.communityId) {
    accountStore.getNotification(accountStore.currentRoom.communityId)
  }
})
</script>

<style scoped lang="scss">
.list-c {
  background: #fcfeff;
  border-radius: 20rpx 20rpx 20rpx 20rpx;
  .item-c {
    border-bottom: 1px solid #e6e8eb;
    &:last-child {
      border-bottom: none;
    }
  }
}
</style>
